import React from 'react';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import {MuiThemeProvider} from 'material-ui/styles';
import IconMenu from 'material-ui-icons/Menu';
import deepPurple from 'material-ui/colors/deepPurple';
import theme from 'styles/theme';
import {toggleState} from 'helpers';
import Menu from 'modules/menu';
import menus from 'objects/menus.json';

export default class AppLayout extends React.Component {

  constructor(...args) {
    super(...args);
    this.state = {
      isSideShown: false
    };
    this.timer = null;
  }

  componentWillUpdate(nextProps, nextState) {
    if (nextState.isSideShown !== this.state.isSideShown) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.side.style.marginLeft = nextState.isSideShown ? 0 : '-200px';
      }, 100);
    }
  }

  toggleSide = (bool) => {
    toggleState.call(this, 'isSideShown', bool);
  };

  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <div className="app-layout">
          <div className="head">
            <AppBar position="static" color="default" style={{boxShadow: 'none'}}>
              <Toolbar/>
            </AppBar>
            <AppBar>
              <Toolbar>
                <IconButton color="contrast" aria-label="Menu" onTouchTap={this.toggleSide}>
                  <IconMenu/>
                </IconButton>
                <Typography type="title" color="inherit">Hello React !</Typography>
              </Toolbar>
            </AppBar>
          </div>
          <div className="body">
            <div
              ref={elem => this.side = elem}
              className="side"
              style={{marginLeft: -200, backgroundColor: deepPurple[50]}}
            >
              <Menu
                menus={menus}
                onItemClick={() => this.toggleSide(false)}
              />
            </div>
            <div className="main">
              {this.props.children}
            </div>
          </div>
        </div>
      </MuiThemeProvider>
    )
  }

}
